<template>
  <div class="app-container">
    <div class="app-head">
      <el-form>
        <el-row type="flex" justify="start">
          <el-col :span="7">
            <el-form-item label="用户中心ID" label-width="160px">
              <el-input v-model.trim="userCenterId" style="width:80%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="业务平台账号" label-width="110px">
              <el-input v-model.trim="userId" style="width:80%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col v-if="plat.length > 1" :span="7">
            <el-form-item label="所属业务平台" label-width="160px">
              <el-select v-model="platformId" style="width:80%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option v-for="item of platform" :key="item.typeId" :value="item.typeId" :label="item.typeName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="absolute main-button">
            <el-button
              v-powerbtn="{power: 'integral-integralLogs-search'}"
              size="mini"
              round
              type="primary"
              icon="el-icon-search"
              @click="search"
            >查询</el-button>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-col :span="7">
            <el-form-item label="是否关联其他平台账号" label-width="160px">
              <el-select v-model="bindingStatus" style="width:80%" size="mini" placeholder="请选择">
                <el-option v-for="item of account" :key="item.value" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="会员级别" label-width="110px">
              <el-select v-model="membershipLevel" style="width:80%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option v-for="item in vipList" :key="item.membershipLevelId" :value="item.membershipLevelId" :label="item.membershipLevelName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="absolute main-button">
            <el-button
              v-powerbtn="{power: 'integral-integralLogs-search'}"
              size="mini"
              round
              icon="el-icon-refresh"
              @click="reset"
            >重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="app-table">
      <el-table
        :data="newList"
        border
        style="width: 100%"
      >
        <el-table-column label="业务平台账号" min-width="100">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.userId" :content="scope.row.userId" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.userId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="用户中心ID" min-width="180">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.userCenterId" :content="scope.row.userCenterId" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.userCenterId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="所属业务平台" width="150">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.platformIdName" :content="scope.row.platformIdName" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.platformIdName }}</span>
            </el-popover>
            <!-- <el-tag v-for="item in scope.row.users" :key="item.number" type="info">{{ item.userId }}</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column label="是否关联其他平台账号" width="170">
          <template slot-scope="scope">
            {{ scope.row.bindingStatus === '0' ? '否' : '是' }}
          </template>
        </el-table-column>
        <el-table-column label="会员级别" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.membershipLevel }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button
              v-powerbtn="{power: 'integral-integralLogs-aboutaccount'}"
              type="primary"
              round
              plain
              size="mini"
              @click="connectNum(scope.row)"
            >
              关联账号详情
            </el-button>
            <el-button
              v-powerbtn="{power: 'integral-integralLogs-queryintegral'}"
              type="primary"
              round
              plain
              size="mini"
              @click="watchPoint(scope.row)"
            >
              积分成长值查询
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          ref="lastPage"
          :current-page="pageid"
          :page-sizes="[20,50,100]"
          :page-size="pagecount"
          :pager-count="7"
          :total="count"
          background
          highlight-current-row
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 关联组件 -->
    <connect-num :connect-val="connectVal" :plat-formarr="platform" :data-val="dataVal" @closeDialog="closeDialog" />
    <!-- 积分组件 -->
    <user-point :point-dialog="pointDialog" :info="info" :platform-term="platform" @closePointss="closePointss" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import powerbtn from '@/directive/powerbtn/index.js'
import secret from '@/utils/secret.js'
import {
  newList,
  getSelect,
  getVipSelect
} from '@/api/search'
import connectNum from './components/connectNum.vue'
import UserPoint from './components/point.vue'
export default {
  directives: {
    powerbtn
  },
  components: {
    connectNum: connectNum,
    UserPoint: UserPoint
  },
  data() {
    return {
      platformId: '',
      info: null,
      membershipLevel: '',
      dataVal: {},
      bindingStatus: '',
      dialogStatus: false,
      account: [{
        value: '',
        label: '全部'
      }, {
        value: '1',
        label: '是'
      }, {
        value: '0',
        label: '否'
      }],
      list: [], // 请求列表
      faStatus: '',
      connectVal: false, // 关联账号遮罩
      newList: [],
      userId: '',
      userCenterId: '',
      serviceId: '',
      flag: true,
      serviceType: '',
      monitId: '',
      platform: [],
      platformArr: [],
      name: '', // 服务名称
      source: '', // 服务来源
      pay: [], // 支付渠道下拉
      pageid: 1, // 当前页数
      pagecount: 20, // 每页可显示条数
      status: false, // 请求状态
      watchDialog: false, // 查看遮罩
      editDialog: false, // 编辑遮罩
      watchId: '0', // 策略id
      count: 0, // 总数量
      paySelect: [],
      allPower: [],
      vipList: [],
      serviceTypeArr: [],
      sourceArr: [],
      arr: [], // 多选
      pointDialog: false, // 积分组件
      realPlat: '',
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      startDate: '',
      endDate: ''
    }
  },
  computed: {
    ...mapGetters(['plat', 'assignment'])
  },
  mounted() {
    this.getSelectList()
    this.realPlat = this.plat.map(item => {
      var index = item.powerCode.lastIndexOf('-')
      var resultZ = item.powerCode.substring(index + 1, item.powerCode.length)
      return resultZ
    })
    // this.platformArr = this.plat
    /*  this.platformArr = [{
      id: 539,
      idVal: 'unicomIptv',
      powerClass: 1,
      powerCode: 'config-platPower-unicomIptv',
      powerName: '联通IPTV',
      powerRemark: '联通IPTV',
      powerType: 'plat',
      roleId: 1
    }]
    if (this.platformArr.length > 0) {
      this.platformArr.forEach(item => {
        var len = item.powerCode.lastIndexOf('-')
        item.idVal = item.powerCode.substr(len + 1)
      })
      // this.getSelectAll()
    }
    if (this.platformArr.length === 1) {
      var sina = this.platformArr[0].powerCode.lastIndexOf('-')
      this.platformId = this.platformArr[0].powerCode.substr(sina + 1)
      // this.getSelectAll(true)
    }
    this.list = this.platformArr
    console.log(this.platformArr)
    this.count = this.list.length */
  },
  methods: {
    // 积分组件
    watchPoint(scope) {
      this.pointDialog = true
      this.info = scope
    },
    closePointss(e) {
      this.pointDialog = false
    },
    // 关联账号详情
    connectNum(scope) {
      this.connectVal = true
      this.dataVal = scope
    },
    closeDialog(val) {
      if (val === true) {
        this.search()
      }
      this.connectVal = false
    },
    // 获取会员级别以及平台list
    getSelectList() {
      getVipSelect().then(res => {
        if (res.resultCode === '0000') {
          var list = res.data.list
          this.vipList = list
        }
      })

      var data = {
        functionType: 'platform'
      }
      // 平台
      getSelect(secret.Encrypt(data)).then(res => {
        // var realPlat = []
        var list = res.data.list
        this.platform = list
        /* var newArr = this.plat.map(item => {
          var powerCode = item.powerCode
          var index = powerCode.indexOf('-')
          var newPower = powerCode.substring(index + 1, powerCode.length)
          return newPower
        })
        list.forEach(items => {
          newArr.forEach(vall => {
            if (vall === items.typeId) {
              realPlat.push(items)
            }
          })
        })
        this.platform = realPlat */
        this.search()
      })
    },
    // 搜索
    search() {
      var platform
      if (this.realPlat.length < 2) {
        platform = this.realPlat[0]
      } else {
        platform = this.platformId
      }
      const param = {
        userCenterId: this.userCenterId,
        membershipLevel: this.membershipLevel,
        userId: this.userId,
        platformId: platform,
        bindingStatus: this.bindingStatus,
        userStatus: '',
        userFreezestatus: '',
        userBoxmac: '',
        beginTime: '',
        endTime: '',
        packageId: '',
        tempToken: '',
        pageid: 1,
        pagecount: this.pagecount
      }
      this.param = param
      console.log('请求参数')
      console.log(param)
      newList(secret.Encrypt(param)).then(response => {
        this.newList = response.data.list // 列表项
        if (Array.isArray(this.newList) && this.newList.length > 0) {
          this.newList.forEach(item => {
            this.platform.forEach(val => {
              if (val.typeId === item.platformId) {
                item.platformIdName = val.typeName
              }
            })
          })
        }
        this.count = parseInt(response.data.count) // 总数量
        this.pages = response.data.pages // 总页数
        this.pageid = parseInt(response.data.pageid) // 当前页数
        // this.pagecount = parseInt(response.data.pagecount) // 当前显示条数
        console.log('返回数据')
        console.log(response.data)
        this.searchRequest = param
        this.status = true
        console.log(response.data.pages)
        /* this.$nextTick(item => {
          // 把最后一页页码处理掉，防止点击造成mongodb卡顿，《牛逼的操作》吐槽
          var lastPage = this.$refs.lastPage
          var father = lastPage.$children[3]
          // 第一次得到页码
          console.log(father.$el.children[7])
          if (father.$el.children[7]) {
            var nums = father.$el.children[7].textContent
            // 除第一次得到的页码
            var realNums = nums.replace(/[^0-9]/ig, '')
            // 他俩相等的话就是第一次加载了,这块很灵性，自己悟
            if (nums == realNums) { // eslint-disable-line
              father.$el.children[7].textContent = `共 ${nums} 页`
              father.$el.children[7].style.backgroundColor = `#fff`
              father.$el.children[7].style.cursor = `auto`
              father.$el.children[7].style.hover = `#fff`
              father.$el.children[7].style.pointerEvents = `none`
            } else {
              father.$el.children[7].textContent = `共 ${realNums} 页`
            }
          } else {
            father.$el.children[7].textContent = `共 ${nums} 页`
            father.$el.children[7].style.backgroundColor = `#fff`
            father.$el.children[7].style.cursor = `auto`
            father.$el.children[7].style.hover = `#fff`
            father.$el.children[7].style.pointerEvents = `none`
          }
        }) */
      }).catch(() => {
        /* this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        }) */
      })
    },
    // 跳转某页
    handleCurrentChange(num) {
      this.pageid = num // 当前页数
      console.log(num)
      var platform
      if (this.realPlat.length < 2) {
        platform = this.realPlat[0]
      } else {
        platform = this.platformId
      }
      const data = {
        userCenterId: this.userCenterId,
        userId: this.userId,
        platformId: platform,
        bindingStatus: this.bindingStatus,
        userStatus: this.userStatus,
        userFreezestatus: this.userFreezestatus,
        userBoxmac: this.userBoxmac,
        beginTime: this.startDate,
        endTime: this.endDate,
        membershipLevel: this.membershipLevel,
        packageId: this.packageId,
        pageid: num,
        pagecount: this.pagecount
      }
      console.log('请求数据')
      console.log(data)
      // if (this.flag === true) {
      newList(secret.Encrypt(data)).then(response => {
        this.newList = response.data.list // 列表项
        if (this.newList.length > 0) {
          this.newList.forEach(item => {
            this.platform.forEach(val => {
              if (val.typeId === item.platformId) {
                item.platformIdName = val.typeName
              }
            })
          })
        }
        this.count = parseInt(response.data.count) // 总数量
        console.log('返回数据')
        console.log(response.data)
      })
      // }
    },
    // 当前页面改变时
    handleSizeChange(num) {
      var platform
      if (this.realPlat.length < 2) {
        platform = this.realPlat[0]
      } else {
        platform = this.platformId
      }
      this.flag = false
      const data = {
        userCenterId: this.userCenterId,
        userId: this.userId,
        platformId: platform,
        bindingStatus: this.bindingStatus,
        userStatus: this.userStatus,
        userFreezestatus: this.userFreezestatus,
        userBoxmac: this.userBoxmac,
        beginTime: this.startDate,
        endTime: this.endDate,
        membershipLevel: this.membershipLevel,
        packageId: this.packageId,
        pageid: 1,
        pagecount: parseInt(num)
      }
      console.log('请求数据')
      console.log(data)
      newList(secret.Encrypt(data)).then(response => {
        this.pagecount = num
        this.pageid = 1
        this.flag = true
        this.newList = response.data.list // 列表项
        if (this.newList.length > 0) {
          this.newList.forEach(item => {
            this.platform.forEach(val => {
              if (val.typeId === item.platformId) {
                item.platformIdName = val.typeName
              }
            })
          })
          this.count = parseInt(response.data.count) // 总数量
          /* this.$nextTick(item => {
            // 把最后一页页码处理掉，防止点击造成mongodb卡顿，《牛逼的操作》吐槽
            var lastPage = this.$refs.lastPage
            var father = lastPage.$children[3]
            // 第一次得到页码
            if (father.$el.children[7]) {
              var nums = father.$el.children[7].textContent
              // 除第一次得到的页码
              var realNums = this.count
              console.log(realNums)
              console.log(nums)
              // 他俩相等的话就是第一次加载了,这块很灵性，自己悟
              if (nums == realNums) { // eslint-disable-line
                father.$el.children[7].textContent = `共 ${response.data.pages} 页`
                father.$el.children[7].style.backgroundColor = `#fff`
                father.$el.children[7].style.cursor = `auto`
                father.$el.children[7].style.hover = `#fff`
                father.$el.children[7].style.pointerEvents = `none`
              } else {
                father.$el.children[7].textContent = `共 ${response.data.pages} 页`
              }
            }
          }) */
        }
      }).catch(() => {
        /* this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        }) */
      })
    },
    openSetting(platformId) {
      console.log(platformId)
      this.dialogStatus = true
      this.platformId = platformId
    },
    closeDia() {
      this.dialogStatus = false
    },
    // 请求列表
    loadList(status) {
      this.pageid = 1
      this.pageid = 1
      if (status === true) {
        this.platform = this.platformId
      }
      /* const request = {
        onlyFlag: this.userId,
        name: this.name,
        platformId: this.platform,
        flag: this.faStatus,
        beginTime: this.startDate,
        endTime: this.endDate,
        lspid: '',
        cspid: '',
        queryType: '0',
        pageNum: 1, // 当前页数
        limit: 20 // 每页可显示条数
      } */
    },
    handleSelectionChange(val) {
      console.log(val)
      if (val.length > 0) {
        this.monitId = val.map(item => {
          return item.id
        })
      }
      if (val.length === 0) {
        this.monitId = []
      }
    },
    // 校验开始时间
    checkStartTime(time) {
      const reg = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.endDate !== null) {
            end = new Date(this.endDate.replace(reg, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(reg, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.startDate = ''
          }
        }
      }
    },

    // 校验结束时间
    checkTime(time) {
      const reg = new RegExp('-', 'g')
      // console.log(newStr)
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.endDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var start
          if (this.startDate !== null) {
            start = new Date(this.startDate.replace(reg, '/')).getTime()
          } else {
            start = ''
          }
          var end = new Date(time.replace(reg, '/')).getTime()
          if (end < start) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.endDate = ''
          }
        }
      }
    },
    connect(id) {
      this.editDialog = true
      this.watchId = id
    },

    closeConect() {
      this.editDialog = false
    },

    reset() {
      if (this.platform.length > 1) {
        this.platformId = ''
      }
      this.userCenterId = ''
      this.bindingStatus = ''
      this.userId = ''
      this.userFreezestatus = ''
      this.userStatus = ''
      this.userBoxmac = ''
      this.startDate = ''
      this.endDate = ''
      this.membershipLevel = ''
      this.packageId = ''
      this.tempToken = ''
      this.faStatus = ''
      this.serviceId = ''
      this.name = ''
      this.source = ''
      this.serviceType = ''
      this.startDate = ''
      this.endDate = ''
    },
    // 查看
    watch(id) {
      this.watchDialog = true
      this.watchId = id
    },

    edit(id) {
      this.editDialog = true
      this.watchId = parseInt(id)
      this.paySelect = this.pay
    },

    // 关闭查看回调
    closeWatch() {
      this.watchDialog = false
    },

    // 新增
    add() {
      this.addDialog = true
      this.paySelect = this.pay
    },

    // 关闭新增回调
    closeAdd() {
      this.addDialog = false
    },

    closeEdit() {
      this.editDialog = false
    }
  }
}
</script>

<style scoped>
.addBtns{
  margin: 5px 0;
}
.timeLength{
  width: 37.5% !important;
}
</style>
